<!--我的作品-->
<template>
    <div style="background-color: aliceblue;width: 100%;height: 1300px">
        <div style="width: 1300px;height: 60px;margin: auto;background-color: white">
           <el-button @click="work" class="el-icon-edit" style="font-size: 20px;margin-right: 1100px;margin-top: 10px">作品管理</el-button>
        </div>
        <div class="divv">
            <div style="text-align: left;margin-left: 30px;">
                <h2>我的作品</h2>
            </div>
            <div style="text-align: right">
                <button style="border: none;font-size: 20px;background-color: white" class="el-icon-edit-outline" @click="creation">创建作品</button>
            </div>

            <el-divider></el-divider>
            <div style="margin-left: 25px;margin-top: 10px;">
<!--                获取所创建书-->
                <div style="width: 950px;height: 200px;border: 1px solid black;margin-top: 20px" v-for="(i,index) in workList" :key="index">
                    <div style="width: 150px;height: 200px;float:left;margin-left: 10px">
                        <el-image :src="require('../img/'+i.pic)" style="width: 150px;height: 200px;float:left;"/>
                    </div>
                    <div style="width: 770px;height: 200px;float:left;">
                        <div><h2 style="text-align: left;margin-left: 20px" v-text="i.title">书名</h2></div>
                        <div  style="text-align: left;margin-top: 70px;margin-left: 20px"><p> →  {{i.bookNovelChapter.title}}</p></div>
                        <div style="text-align: right" v-if="i.serialize===1">
                            <el-button style="">已完结</el-button>
                        </div>
                        <div v-else style="text-align: right"><el-button style="" @click="se(i)">完结</el-button><el-button type="primary" @click="writer(i)">去写作</el-button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MyWorks",
        data(){
          return{
            workList:{},
          }
        },
        created() {
            this.$http.post("nove/findUid",{uid:localStorage.getItem("id")}).then(response=>{
                this.workList=response.data;
            })
        },
        methods:{
            se(row){
                this.$confirm('小主确定要完结此图书吗？, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("nove/editS",{serialize:1,id:row.id}).then(response=>{
                        if(response.data){
                            this.$notify({
                                title: '成功',
                                message: '完结成功~',
                                type: 'success'
                            });
                            location.reload();
                        }else{
                            this.$notify({
                                title: '成功',
                                message: '完结失败~',
                                type: 'success'
                            });
                            location.reload();
                        }
                    })
                })

            },
            creation(){
                this.$router.replace("/creation")
            },
            work(){
                this.$router.replace("/myWorks")
            },
            writer(i){
                this.$router.replace({name:"writing",params:{title:i.title,id:i.id}})
            }
        }


    }
</script>

<style scoped>
    .divv{
        background-color: white;
        margin: auto;
        margin-top: 20px;
        width: 1000px;
        height: 1200px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .a{
        margin-left: 900px;
        margin-top: -500px;
        text-decoration: none;
    }
</style>
